<template>
    <div class="type">
        <div class="opeation">
            <div class="search">
                <el-input placeholder="请输入内容" v-model="search" class="input-with-select">
                    <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </div>

            <div class="add">
                <el-button type="primary" @click="add">新增</el-button>
            </div>
        </div>
        <div class="date-list">
            <el-table :data="typeList" style="width: 100%">
                <el-table-column prop="id" label="id">
                </el-table-column>
                <el-table-column prop="type" label="分类">
                </el-table-column>

                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <div class="option">
                            <el-button size="mini" @click="edit(scope.row)">编辑</el-button>
                            <el-button size="mini" @click="del(scope.row)" type="danger">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <div class="form-box">
                <el-input v-model="type.type" placeholder="请输入分类名称"></el-input>
                <Upload :image-path="type.image" @setImagePath="setImagePath"></Upload>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import API_URI from '../util/API/ApiUtil'
import ObjectNotEmpty from '../util/common/ObjectNotEmpty'
import Upload from '@/components/Upload/Upload.vue'
export default {
    components: {
        Upload
    },
    data() {
        return {
            search: '',
            dialogVisible: false,
            update: 0,
            typeList: [],
            type: {
                id: '',
                type: '',
                image: '',
            }
        }
    },
    created() {
        this.getTypeList()
    },
    methods: {
        getTypeList() {
            this.$axios.get(API_URI.GET_TYPE_LIST)
                .then(res => {
                    if (res.code == 200) {
                        this.typeList = res.data.typeList
                    }
                })
        },
        clearData() {
            this.type = {
                id: '',
                type: '',
            }
        },
        add() {
            this.clearData()
            this.update = 0
            this.dialogVisible = true
        },
        edit(data) {
            this.type = data
            this.update = 1
            this.dialogVisible = true
        },
        del(data) {
            this.$axios.delete(API_URI.DELETE_TYPE, { data })
                .then(res => {
                    if (res.code == 200) {
                        this.dialogVisible = false
                        this.$success("删除成功")
                        this.getTypeList()
                    } else {
                        this.$error("删除失败")
                    }
                })
        },
        confirm() {


            let data = this.type
            //新增 
            if (this.update == 0) {
                let notEmpty = ObjectNotEmpty(this.type, ['id'])

                if (!notEmpty) {
                    this.$error("请输入完整信息")
                    return
                }

                this.$axios.post(API_URI.ADD_TYPE, data)
                    .then(res => {
                        if (res.code == 200) {
                            this.$success(res.message)
                            this.getTypeList()
                            this.dialogVisible = false
                        } else {
                            this.$error(res.message)
                        }
                    })
            }

            //修改
            else {
                let notEmpty = ObjectNotEmpty(this.type)

                if (!notEmpty) {
                    this.$error("请输入完整信息")
                    return
                }

                this.$axios.put(API_URI.UPDATE_TYPE, data)
                    .then(res => {
                        if (res.code == 200) {
                            this.$success(res.message)
                            this.getTypeList()
                            this.dialogVisible = false
                        } else {
                            this.$error(res.message)
                        }
                    })
            }
        },
        setImagePath(val) {
            this.type.image = val
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        }

    }
}
</script>

<style scoped>
.opeation {
    display: flex;
    justify-content: space-between;

    margin: 10px 0;
}

.search {
    width: 60%;
}

.form-box > div{
    margin:10px 0;
}
</style>